<template>
  <content-box :title="title" style="height: 380px" :loading="loading">
    <template slot="left">
      <div class="font-size-14">近七天</div>
    </template>
    <div class="flex chart-box full-width full-height column">
      <div class="flex justify-end full-width font-size-14 text-grey">
<!--        <div style="margin-right: 30px">共计{{ devices }}台设备</div>-->
        <div>总时间开动率：{{ actuateRate }}</div>
      </div>
      <div class="chart" ref="chart" id="chart"/>
    </div>
  </content-box>
</template>

<script>
import contentBox from 'src/pages/status-monitor-v3/components/status-overview/content-box'
// import { getOeeInfo } from 'src/boot/status-monitor/status-overview'
import chart from 'src/pages/status-monitor-v3/components/status-overview/chart-option'
import echarts from 'echarts'
import moment from 'moment'
import { addListener } from 'resize-detector'
import { getAvailabilityList } from 'src/boot/statistics/availability-stat'
import exportStat from 'src/pages/statistics/components/stat-export'
import _ from 'lodash'
export default {
  name: 'availability',
  components: {
    contentBox
  },
  data () {
    return {
      loading: false,
      title: '时间开动率趋势图',
      chartTypeList: [
        {
          label: '近7天',
          value: 'daily'
        }, {
          label: '近1个月',
          value: 'weekly'
        }, {
          label: '近1年',
          value: 'monthly'
        }
      ],
      devices: 0,
      actuateRate: '0.00%',
      chartType: 'daily',
      workshop: null,
      chart: null,
      data: []
    }
  },
  mounted () {
    addListener(this.$refs.chart, this.$utils.debounce(() => {
      if (this.$route.name !== 'statusOverview') {
        return
      }
      if (this.chart === null) {
        this.chart = echarts.init(this.$refs.chart)
      } else {
        this.chart.resize()
        this.getData()
      }
    }, 100))
  },
  methods: {
    changeWorkshop (selId = null) {
      selId !== null && (this.workshop = selId)
      this.getOeeInfo()
    },
    getTotal (total) {
      this.devices = total
    },
    // getOeeInfo () {
    //   if (this.workshop === null) {
    //     return
    //   }
    //   this.loading = true
    //   let params = {}
    //   if (this.chartType === 'daily') {
    //     params = {
    //       startDate: moment(new Date()).subtract(6, 'days').format('YYYY-MM-DD'),
    //       endDate: moment(new Date()).format('YYYY-MM-DD')
    //     }
    //   }
    //   getOeeInfo(this.workshop, params, this.chartType).then(res => {
    //     this.data = res.data
    //     // this.actuateRate = exportStat.getPercentage(_.sumBy(res.data, 'value') / res.data.length) + '%'
    //     this.getData(res.data)
    //   }).finally(() => {
    //     this.loading = false
    //   })
    // },
    getOeeInfo () {
      if (this.workshop === null) {
        return
      }
      this.loading = true
      let params = {
        startDate: moment(new Date()).subtract(6, 'days').format('YYYY-MM-DD'),
        endDate: moment(new Date()).format('YYYY-MM-DD'),
        type: 1,
        deviceTreeReqVO: {
          deviceIds: [],
          level: 2,
          schemeId: this.workshop
        }
      }
      getAvailabilityList(params).then(res => {
        if (res.data.oeeAPCReportsResVOS && res.data.oeeAPCReportsResVOS.length) {
          this.actuateRate = exportStat.getPercentage(_.sumBy(res.data.oeeAPCReportsResVOS, 'timeRate') / res.data.oeeAPCReportsResVOS.length) + '%'
          this.data = res.data.oeeAPCReportsResVOS
          this.getData(res.data.oeeAPCReportsResVOS)
        } else {
          this.actuateRate = '0.00%'
          this.data = []
          this.getData([])
        }
      }).finally(() => {
        this.loading = false
      })
    },
    getData (data = this.data) {
      const timeRate = data.map(item => Number(item.timeRate * 100).toFixed(1))
      let xData = []
      if (this.chartType === 'daily') {
        data.forEach(item => {
          xData.push(moment(item.date).format('MM-DD'))
        })
      }
      this.$nextTick(() => {
        if (this.chart === null) {
          this.chart = echarts.init(this.$refs.chart)
        }
        const option = chart.getLineOption(timeRate, xData)
        this.chart.setOption(option)
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.form-inline{
  padding 0 !important
}
>>>.multipe-select{
  margin 0 !important
}
.text-grey{
  color #666666
}
.chart{
  height calc(100% - 14px)
}
  .workshop-list{
    max-width 120px
  }
</style>
